<template>
  <div id="health-content" class="tab-content active">
    <h2 class="section-title"><i class="fas fa-heartbeat"></i> 健康数据</h2>
    <p style="margin-bottom: 20px;">监测您的健康指标，保持良好状态</p>

    <div class="health-metrics">
      <div class="metric-card">
        <div class="metric-icon">
          <i class="fas fa-heartbeat"></i>
        </div>
        <div class="metric-info">
          <div class="metric-title">心率</div>
          <div class="metric-value">72</div>
          <div class="metric-status">正常 (60-100 bpm)</div>
        </div>
        <div class="heart-rate">
          <div class="heart-line"></div>
        </div>
      </div>

      <div class="metric-card">
        <div class="metric-icon">
          <i class="fas fa-lungs"></i>
        </div>
        <div class="metric-info">
          <div class="metric-title">血氧</div>
          <div class="metric-value">98%</div>
          <div class="metric-status">优秀 (>95%)</div>
        </div>
        <div class="metric-chart">
          <div class="chart-line">
            <div class="chart-bar" style="height: 70%"></div>
            <div class="chart-bar" style="height: 85%"></div>
            <div class="chart-bar" style="height: 95%"></div>
            <div class="chart-bar" style="height: 98%"></div>
            <div class="chart-bar" style="height: 96%"></div>
            <div class="chart-bar" style="height: 97%"></div>
          </div>
        </div>
      </div>

      <div class="metric-card">
        <div class="metric-icon">
          <i class="fas fa-bed"></i>
        </div>
        <div class="metric-info">
          <div class="metric-title">睡眠</div>
          <div class="metric-value">7h 32m</div>
          <div class="metric-status">良好</div>
        </div>
        <div class="metric-chart">
          <div class="chart-line">
            <div class="chart-bar" style="height: 40%"></div>
            <div class="chart-bar" style="height: 80%"></div>
            <div class="chart-bar" style="height: 95%"></div>
            <div class="chart-bar" style="height: 65%"></div>
            <div class="chart-bar" style="height: 30%"></div>
            <div class="chart-bar" style="height: 20%"></div>
          </div>
        </div>
      </div>

      <div class="metric-card">
        <div class="metric-icon">
          <i class="fas fa-temperature-high"></i>
        </div>
        <div class="metric-info">
          <div class="metric-title">体温</div>
          <div class="metric-value">36.5°C</div>
          <div class="metric-status">正常</div>
        </div>
        <div class="metric-chart">
          <div class="chart-line">
            <div class="chart-bar" style="height: 65%"></div>
            <div class="chart-bar" style="height: 70%"></div>
            <div class="chart-bar" style="height: 75%"></div>
            <div class="chart-bar" style="height: 73%"></div>
            <div class="chart-bar" style="height: 72%"></div>
            <div class="chart-bar" style="height: 74%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="js">
  export default {
    name: 'HealthIndex',
    components: {
    }
  }
</script>
<style scoped>
</style>